// components/rgb-slider/rgb-slider.js
Component({
  properties: {
    presets: {
      type: Array,
      value: [],
      observer(newVal) {
        console.log("newVal",newVal)
        this.initChannel();
      }
    },
  },

  data: {
    // 组件内部数据
    STEP_VALUE: 5, // 长按步进值，默认为5
    stepTimer: null, // 用于存储定时器ID
    longPressTimer: null, // 用于存储长按检测定时器ID
    TIMER_INTERVAL: 200, // 定时器间隔，单位毫秒
    tempValues: {}, // 临时存储长按过程中的值变化
    needToSendUpdate: false, // 标记是否需要在长按结束时发送更新
    channels:[],
  },

  methods: {
    initChannel() {
      const selectedPreset = this.data.presets.find(preset => preset.selected);
      this.setData({
        channels:selectedPreset.channels
      })
    },

    // 长按开始时触发的事件处理函数
    handleTouchStart(e) {
      const { type, action } = e.currentTarget.dataset
      // 清除可能存在的定时器
      this.clearStepTimer()

      // 初始化临时存储的值
      this.data.tempValues = {}
      this.data.needToSendUpdate = false

      // 立即设置标志位为true，防止触发单击事件
      this.setData({
        isTouching: true,
      })

      // 设置一个短暂的延时，确保能区分点击和长按
      this.data.longPressTimer = setTimeout(() => {
        // 清除长按定时器引用，表示已经进入长按状态
        this.data.longPressTimer = null

        // 先执行一次操作
        if (action === 'increase') {
          this.increaseValueByStep(e, true) // true表示只更新UI，不发送数据
        } else if (action === 'decrease') {
          this.decreaseValueByStep(e, true) // true表示只更新UI，不发送数据
        }

        // 设置定时器，持续执行操作
        this.data.stepTimer = setInterval(() => {
          if (action === 'increase') {
            this.increaseValueByStep(e, true) // true表示只更新UI，不发送数据
          } else if (action === 'decrease') {
            this.decreaseValueByStep(e, true) // true表示只更新UI，不发送数据
          }
        }, this.data.TIMER_INTERVAL)
      }, 300) // 300毫秒的延时，用于区分点击和长按
    },

    // 长按结束时触发的事件处理函数
    handleTouchEnd(e) {
      this.clearStepTimer()

      // 判断是否是短暂触摸还是长按
      // 如果longPressTimer还存在，说明还没有进入长按状态，是短暂触摸
      const isShortTouch = this.data.longPressTimer !== null

      // 清除长按定时器，防止触发长按操作
      if (this.data.longPressTimer) {
        clearTimeout(this.data.longPressTimer)
        this.data.longPressTimer = null
      }

      // 如果需要发送更新，则在长按结束时发送最终值
      if (this.data.needToSendUpdate && this.data.tempValues.type) {
        const { type, value } = this.data.tempValues
        // 发送最终值给父组件
        this.triggerEvent('sliderchange', { type, value, value })

        // 重置标记和临时值
        this.data.needToSendUpdate = false
        this.data.tempValues = {}
      } else if (isShortTouch) {
        // 如果是短暂触摸，则触发单击事件
        const { type, action } = e.currentTarget.dataset
        if (action === 'increase') {
          this.increaseValue(e)
        } else if (action === 'decrease') {
          this.decreaseValue(e)
        }
      }

      // 立即重置isTouching标志位，确保单击事件能正常触发
      this.setData({
        isTouching: false,
      })
    },

    // 清除定时器
    clearStepTimer() {
      if (this.data.stepTimer) {
        clearInterval(this.data.stepTimer)
        this.data.stepTimer = null
      }
    },

    onSliderChange(e) {
      const { type } = e.currentTarget.dataset
      const value = e.detail.value
      console.log(type)
      console.log(value)
      // 触发自定义事件，将变化传递给父组件，同时传递PWM值
      this.triggerEvent('sliderchange', { type, value, value })
    },

    onSliderChangeing(e) {
      const { type } = e.currentTarget.dataset
      const value = e.detail.value
      console.log(type)
      console.log(value)
      // 触发自定义事件，将变化传递给父组件，同时传递PWM值
      this.triggerEvent('sliderchangeing', { type, value, value })
    },

    decreaseValue(e) {
      // 由于我们已经在handleTouchEnd中处理了短按和长按的区分
      // 这里不再需要检查isTouching标志位

      const { type } = e.currentTarget.dataset
      let value=this.getChannelVal(type)

      if (value > 0) {
        const newValue = value - 1
        // 传递PWM值给父组件
        this.triggerEvent('sliderchange', { type, value: newValue, newValue })
      }
    },

    // 长按减少值，每次减少STEP_VALUE
    decreaseValueByStep(e, uiUpdateOnly = false) {
      const { type } = e.currentTarget.dataset
      let value=this.getChannelVal(type)

      // 确保不会减到负值，最小为0
      const newValue = Math.max(0, value - this.data.STEP_VALUE)

      // 如果只是UI更新，则不触发事件，只更新本地属性
      if (uiUpdateOnly) {
        // 存储临时值，用于长按结束时发送
        this.data.tempValues = { type, value: newValue }
        this.data.needToSendUpdate = true

        // 更新本地UI
        const data = {}
        data[`${type}Value`] = newValue
        this.setData(data)
      } else {
        // 传递PWM值给父组件
        this.triggerEvent('sliderchange', { type, value: newValue, newValue })
      }
    },

    increaseValue(e) {
      // 由于我们已经在handleTouchEnd中处理了短按和长按的区分
      // 这里不再需要检查isTouching标志位

      const { type } = e.currentTarget.dataset
      let value=this.getChannelVal(type)

      if (value < 100) {
        const newValue = value + 1
        // 传递PWM值给父组件
        this.triggerEvent('sliderchange', { type, value: newValue, newValue })
      }
    },

    // 长按增加值，每次增加STEP_VALUE
    increaseValueByStep(e, uiUpdateOnly = false) {
      const { type } = e.currentTarget.dataset
      let value=this.getChannelVal(type)
      // 确保不会超过最大值100
      const newValue = Math.min(100, value + this.data.STEP_VALUE)

      // 如果只是UI更新，则不触发事件，只更新本地属性
      if (uiUpdateOnly) {
        // 存储临时值，用于长按结束时发送
        this.data.tempValues = { type, value: newValue }
        this.data.needToSendUpdate = true

        // 更新本地UI
        const data = {}
        data[`${type}Value`] = newValue
        this.setData(data)
      } else {
        // 传递PWM值给父组件
        this.triggerEvent('sliderchange', { type, value: newValue, newValue })
      }
    },
    getChannelVal(type){
      let value=0
      for(var i=0;i<this.data.channels.length;i++){
        if(this.data.channels[i].n==type){
          value=this.data.channels[i].v
          break
        }
      }
      return value
    },




  },
  

})
